<template>
  <div v-if="contents">
    <div>
      <div><!--主体展示-->
        <div class="dfwMainHead"><!--头部图层展示-->
          <product-type :font-col="false" @clickprotype="clickProType($event)"/>
        </div>
        <div class="dfwMainCentre"><!--中心主体-->
          <div class="dfwMainCentreOne"><!--商品图片大小图展示-->
            <div class="dfwMainCentreTwo">
              <div class="detailMaxImg">
                <img :src="contents.content.currShowImg" class="dfwMainCentreFour"/>
              </div>
              <div class="dfwMainCentreFive">
                <div class="dfwMainCentreSix">
                  <div v-for="(item,index) in contents.content.comShowMinImgGroup">
                    <img :src="item" class="detailMinImg"
                         @click="clickMinImg(index)"
                         @mouseleave="outSetOpacity(index)"
                         @mouseenter="inSetOpacity(index)"/>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="proBuyMain"><!--商品购买层-->
            <div class="proBuyMainOne">
              <span class="proBuyMainTwo">
                {{contents.content.currentSerName}}
                {{contents.content.currentColor}}
                {{contents.content.currentConfig}}
              </span>
            </div>
            <div class="proBuyMainThree">
              <div v-for="item in contents.content.description">
                <span class="proBuyMainFour">{{item}}</span>
              </div>
            </div>
            <div class="proBuyMainFive">
              <span class="proBuyMainSix">￥{{contents.content.comPrice}}</span>
            </div>
            <div class="proBuyMainSeven">
              <button-box type-name="颜色" @submitdeta="clickChangeColor($event)" :curr-val="contents.content.currentColor" :config-name="contents.content.serColor"/>
            </div>
            <div class="proBuyMainEight">
              <button-box type-name="配置" @submitdeta="clickChangeMenConfig($event)" :curr-val="contents.content.currentConfig" :config-name="contents.content.serConfig"/>
            </div>
            <div class="proBuyMainNine">
              <button-box type-name="服务" is-can-can-cel="true" @submitdeta="clickChangeService($event)" :curr-val="contents.content.currentService" :config-name="contents.content.serService"/>
            </div>
            <div>
              <div class="proBuyMainTen">
                <span class="proBuyMainEleven">选择数量</span>
              </div>
              <div>
                <button-update-num ref="selectNumChild" />
              </div>
            </div>
            <div class="proBuyMainTwelve">

            </div>
            <div class="proBuyMainThirteen">

            </div>
            <div class="proBuyMainFourteen">
              <div class="proBuyMainFiveteen">
                <submit-button text-msg="加入购物车" @click="clickAddShoppingCar()" button-back-color="#e7e7e7" button-font-color="black"/>
              </div>
              <div>
                <submit-button @click="clickPromptlyBuy()" text-msg="立即购买" button-back-color="orangered" button-font-color="white"/>
              </div>
            </div>
            <div class="proBuyMainSixteen">
            </div>
          </div>
        </div>
      </div>
      <div><!--系列图片展示-->
        <div class="serImgShow">
          <div class="serImgShowOne">
            <div v-for="item in contents.serShowImgGroup">
              <img :src="item" class="serImgShowTwo"/>
            </div>
          </div>
        </div>
      </div>
      <div>
        <div>
          <foot-nva/>
        </div>
      </div>
    </div>

    <el-dialog
      title="登录提示"
      v-model="centerDialogVisible"
      width="30%"
      destroy-on-close
      center>
      <span>加入购物车之前需要登录，</span>
      <strong>是否前往登录？</strong>
      <template #footer>
    <span class="dialog-footer">
      <el-button @click="centerDialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="goLog()">确 定</el-button>
    </span>
      </template>

    </el-dialog>
  </div>
</template>

<script>

  import {requestDetailData,addShoppingCarData,requestShoppingCartGetAllData} from "../../../network/home";
  import ProductType from "../productclass/ProductType";
  import {upMoveSpecial} from "../../../commonjs/const/waxSpecial";

  import ButtonBox from "./ButtonBox";

  import ButtonUpdateNum from "./ButtonUpdateNum";

  import SubmitButton from "./SubmitButton";

  import footNva from "../buttomNav/footNva";

  import {mapGetters,mapActions} from "vuex"
  import store from "../../../store";


  //后期通过this.$route.params.comId获取传过来的商品编号，再发送给后端获取数据
  export default {
    name: "DetailFrameWork",
    components: {
      ProductType,
      ButtonBox,
      ButtonUpdateNum,
      SubmitButton,
      footNva
    },
    data() {
      return {
        preIndex: 0,
        contents: null,
        tempBoo: true,
        centerDialogVisible: false//弹出层变量
      }
    },
    methods: {
      ...mapActions({
        addData: "DetailData/addData",
        addSingleVal: "ShopCarData/addSingleVal",
        loadShopCarData: "ShopCarData/loadShopCarData",
        loadDataForOrderSubmitData: "OrderSubmitData/loadDataForOrderSubmitData"
      }),
      goLog(){//前往登录页面
        this.centerDialogVisible = false;//关闭弹出层
        this.$router.push({path: "/log"})
      },
      clickAddShoppingCar(){//点击加入购物车方法
        //判断用户是否登陆
        if (!this.$store.state.UserMsg.UserMsg.logStatus){//用户为未登录状态
          this.centerDialogVisible = true;//显示弹出层
        }else {
          //添加购物车信息
          let tempVal = {
            comId : this.contents.comId,
            serviceId : this.getSerIdBySerName(this.contents.content.currentService),
            proNum : this.$refs.selectNumChild.currVals,
            isSelect : false
          }
          //调用添加store中购物车信息方法
          this.addSingleVal(tempVal);
          //调用刷新session中购物车数据方法
          this.refreshShopCarSessionStorageData;
          //修改后台购物车数据
          tempVal.userId = this.getUserId;
          addShoppingCarData(tempVal)
            .then(data => {
              if (data) this.$message.success("添加购物车成功！"); else this.$message.error("添加购物车失败！");
              return Promise.resolve(true);
            }).then(data => {//请求后台数据
              return requestShoppingCartGetAllData(this.getUserId);
            }).then(data => {
              //替换所有store中的购物车数据
              this.loadShopCarData(data.data);
              //刷新session中的数据
              this.refreshShopCarSessionStorageData;
          })
        }
      },
      clickPromptlyBuy(){//点击立即购买
        //在跳转页面之前要让订单提交页面先获取数据：商品编号、数量、商保
        let tempVal = {
          comId : this.contents.comId,
          buyNum : this.$refs.selectNumChild.currVals,
          serviceId : this.getSerIdBySerName(this.contents.content.currentService),
        }
        this.loadDataForOrderSubmitData([tempVal]);
        //调用保存session的方法
        this.refreshOrderSubmitDataSessionStorageData;
        //通过路由跳转到提交订单页面
        this.$router.push({path: "/submitOrder"});
      },
      clickMinImg(index) {//点击小图片，显示对应的大图片
        //取出当前点击的图片
        let maxImg = this.contents.content.comShowMaxImgGroup[index];
        //让点击的图片作为放大图片显示
        this.contents.content.currShowImg = maxImg;
        //取出该放大图片元素
        let dateilMaxIng = document.getElementsByClassName("detailMaxImg")[0];
        //调用函数按动画向上移动的方式显示
        upMoveSpecial(dateilMaxIng, -40, 1)
        //让小图片高亮显示，且在点击下一个小图片之前，不取消高亮：取消上一个点击图片的高亮显示
        this.inSetOpacity(index);
        //临时存储前一个高亮图片
        let tempIndex = this.preIndex;
        //修改点击高亮图片为当前图片
        this.preIndex = index;
        //取消前一个点击的高亮图片，让其取消高亮图片特性
        this.outSetOpacity(tempIndex);
      },
      inSetOpacity(index) {
        let minImg = document.getElementsByClassName("detailMinImg")[index];
        minImg.style.opacity = 1;
      },
      outSetOpacity(index) {
        let minImg = document.getElementsByClassName("detailMinImg")[index];
        //如果该图片是上次点击的图片则不取消高亮显示
        if (index != this.preIndex) minImg.style.opacity = 0.3;
      },
      clickChangeColor(event){//点击切换颜色
        let tempVal = {
          currMomConfig: this.contents.content.currentConfig,
          currColor: event.configName,
          serId: this.contents.serId,
          serviceName: false
        }
        this.getComId(tempVal);
      },
      clickChangeMenConfig(event){//点击切换内存配置
        let tempVal = {
          currColor: this.contents.content.currentColor,
          currMomConfig: event.configName,
          serId: this.contents.serId,
          serviceName: false
        }
        this.getComId(tempVal);
      },
      clickChangeService(event){//点击修改服务
        let tempVal = {
          currColor: this.contents.content.currentColor,
          currMomConfig: this.contents.content.currentConfig,
          serId: this.contents.serId,
          serviceName: event.configName
        }
        this.getComId(tempVal);
      },
      clickProType(val){
        this.tempBoo = false;
        this.dataStore(val.comId);
      },
      dataStore(comId){
        //在跳转页面之前，先将详情页面的数据加载到store当中
        new Promise(resolve => {
          let tempBoo = true;
          if (sessionStorage.getItem("DetailData")){
            JSON.parse(sessionStorage.getItem("DetailData")).filter(item => {
              if (item.comId == comId){
                return tempBoo = false;
              }
            })
          }
          if (tempBoo){//是否需要向后台请求数据需要根据当前sessionStorage中是否存在该些数据
            requestDetailData(comId)//向后台请求数据
              .then(data => {
                //将值存储进去
                let tempVal = [...data.data]
                if (JSON.parse(sessionStorage.getItem("DetailData"))) sessionStorage.setItem("DetailData",JSON.stringify(tempVal.concat(JSON.parse(sessionStorage.getItem("DetailData")))));
                else sessionStorage.setItem("DetailData",JSON.stringify(tempVal));
                return resolve(true);
              });
          }else return resolve(true);
        }).then(data => {
          if (sessionStorage.getItem("DetailData")){
            this.addData(JSON.parse(sessionStorage.getItem("DetailData")))
          }
          return Promise.resolve(true);
        }).then(data => {
          if (this.detailData.length != 0){
            this.contents = this.detailData.filter(detail => {
              return detail.comId == comId;
            })[0];
          }
          return Promise.resolve(true);
        }).catch(data => {
          console.log(data);
        })
      },
      refreshFun(){
        this.$router.go(0);
      },
    },
    computed: {
      ...mapGetters({
        detailData: "DetailData/getData",
        getComId: "DetailData/getComIdByManyConfigMsg",
        getAllData: "DetailData/getAllData",
        getSerIdBySerName: "ServiceMsg/getSerIdBySerName",
        refreshShopCarSessionStorageData: "ShopCarData/refreshShopCarSessionStorageData",
        getUserId: "UserMsg/getUserId",
        refreshOrderSubmitDataSessionStorageData: "OrderSubmitData/refreshOrderSubmitDataSessionStorageData"
      })
    },
    async created() {
      let comId = this.$route.query.comId;
      this.dataStore(comId);
    },
    beforeRouteUpdate(to,from,next){
      if (this.tempBoo){
        //获取上个页面传送过来的商品id
        let tempNum = to.query.comId;
        this.contents = this.detailData.filter(detail => {
          return detail.comId == tempNum;
        })[0];
      }else {
        setTimeout(() => {
          this.refreshFun();
        },500);
      }
      this.tempBoo = true;
      next();
    },
  }
</script>

<style scoped>
  .dfwMainHead {
    height: 90px;
    width: 100%;
    border-bottom: #e7e7e7 solid 1px;
  }

  .dfwMainCentre {
    display: flex;
  }

  .dfwMainCentreOne {
    width: 55%;
    height: 800px;
  }

  .dfwMainCentreTwo {
    width: 96%;
    height: 94%;
    background-color: white;
    margin-left: 2%;
    margin-right: 2%;
  }

  .detailMaxImg {
    width: 60%;
    height: 70%;
    margin-left: 20%;
    top: 13%;
    position: relative
  }

  .dfwMainCentreFour {
    width: 550px;
    height: 550px;
    bottom: 20px;
    position: relative;
  }

  .dfwMainCentreFive {
    width: 90%;
    height: 13%;
    position: relative;
    margin-left: 4%;
    top: 16%;
  }

  .dfwMainCentreSix {
    display: flex
  }

  .detailMinImg {
    width: 80px;
    height: 80px;
    margin-left: 20px;
    cursor: pointer;
    opacity: 0.5;
  }

  .proBuyMain {
    width: 45%;
    margin-top: 60px;
  }

  .proBuyMainOne {
    width: 100%;
    height: 50px;
  }

  .proBuyMainTwo {
    font-size: 23px
  }

  .proBuyMainThree {
    width: 100%;
  }

  .proBuyMainFour {
    font-size: 14px
  }

  .proBuyMainFive {
    width: 60%;
    height: 60px;
    border-bottom: #e7e7e7 solid 1px
  }

  .proBuyMainSix {
    font-size: 26px;
    position: relative;
    top: 13px;
    color: gold;
  }

  .proBuyMainSeven {
    width: 63%;
  }

  .proBuyMainEight {
    width: 63%;
  }

  .proBuyMainNine {
    width: 63%;
  }

  .proBuyMainTen {
    margin-top: 10px;
    margin-bottom: 15px
  }

  .proBuyMainEleven {
    font-size: 14px
  }

  .proBuyMainTwelve {
    width: 60%;
    height: 35px;
    border-bottom: #e7e7e7 solid 1px
  }

  .proBuyMainThirteen {
    width: 60%;
    height: 50px;
  }

  .proBuyMainFourteen {
    width: 60%;
    display: flex
  }

  .proBuyMainFiveteen {
    margin-right: 40px;
  }

  .proBuyMainSixteen {
    width: 60%;
    height: 50px;
  }

  .serImgShow {
    width: 100%;
    background-color: gold;
    background-color: #e7e7e7;
    display: flex;
    justify-content: center
  }

  .serImgShowOne {
    margin-top: 40px;
    width: 1200px;
    background-color: white;
    margin-bottom: 40px;
  }

  .serImgShowTwo {
    width: 96%;
    margin-left: 2%;
    margin-top: 3%;
  }
</style>
